@@include('../_includes/html-head.html', {"title": "Landing - Product", "path":"../"})

<body>
	
	@@include('../_includes/header.html')
	
    <main id="site-content" role="main" class="container product" data-v-component-product>
	
		@@include('../_includes/breadcrumb.html')

        <div class="row g-0 mb-4">
			<div class="col-md-6 col-sm-12">
			
				<div id="product-gallery" class="carousel slide" data-bs-ride="carousel" data-bs-touch="true" data-v-product-images>
				  <div class="carousel-inner">
					<div class="carousel-item active">
						<div class="zoom" data-v-product-main-image-background-image>
							<img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-main-image>
						</div>
					</div>					
					<div class="carousel-item" data-v-product-image>
						<div class="zoom" data-v-product-image-background-image>
							<img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
						</div>
					</div>
					<div class="carousel-item" data-v-product-image>
						<div class="zoom" data-v-product-image-background-image>
							<img src="img/demo/product-2.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
						</div>
					</div>
				  </div>
				  <button class="carousel-control-prev" type="button" data-bs-target="#product-gallery" data-bs-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Previous</span>
				  </button>
				  <button class="carousel-control-next" type="button" data-bs-target="#product-gallery" data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Next</span>
				  </button>
			  </div>
			  
			  <div class="carousel">
			  
				<div class="carousel-thumbs" data-v-product-images>
					<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="0">
						<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-main-image>
					</button>
					<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="1" data-v-product-image>
						<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
					</button>
					<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="2" data-v-product-image>
						<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
					</button>
					<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="3" data-v-product-image>
						<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
					</button>
				</div>
				
			  </div>
		
		
			
			</div>

			<div class="col-md-6 col-sm-12 p-4" id="product">
				<h1 class="product-name mb-2" data-v-product-name>One Shoulder Glitter Midi Dress</h1>

				<div data-v-if="product.manufacturer_id">
					<span class="text-muted">Manufacturer</span>
					<a href="#" data-v-product-manufacturer_url>
						<span data-v-product-manufacturer_name>mango</span>
					</a>
				</div>

				<div data-v-if="product.vendor_id">
					<span class="text-muted">Vendor</span>
					<a href="#" data-v-product-vendor_url>
						<span data-v-product-vendor_name>mango</span>
					</a>
				</div>

				<div data-v-if="product.vendor_id">
					<span class="text-muted">Availability</span>
					<span data-v-product-stock_status_name>In stock</span>
				</div>
				
				
				
				<div class="my-2">
					<small class="text-secondary" data-v-if="product.rating"> 
						<i class="la la-star" data-v-class-if-text-warning="product.rating >= 1"></i>
						<i class="la la-star" data-v-class-if-text-warning="product.rating >= 2"></i>
						<i class="la la-star" data-v-class-if-text-warning="product.rating >= 3"></i>
						<i class="la la-star" data-v-class-if-text-warning="product.rating >= 4"></i>
						<i class="la la-star" data-v-class-if-text-warning="product.rating >= 5"></i>
						<!-- <i class="la la-star-half"></i> -->
					</small>
					<a href="#reviews" data-v-if="product.reviews" class="ms-2" type="button" data-bs-target="#reviews">(<span data-v-product-reviews>no</span> reviews)</a>
				</div>

				
				<p class="product-price" data-v-if="product.promotion">
					<span class="price" data-v-product-promotion_tax_formatted>$49.00</span>

					<span class="text-decoration-line-through text-secondary text-opacity-75" data-v-product-price_tax_formatted>$350</span>
					<small class="fs-6 ms-2 text-danger">
						<span data-v-product-promotion_discount>30</span>% Off
					</small>
				</p>

				<p class="product-price" data-v-if-not="product.promotion">
					<span class="price" data-v-product-price_tax_formatted>$49.00</span>
				</p>
				
				<span class="price muted small"><span>Excluding taxes:</span><span data-v-product-price_formatted>$49.00</span></span>

				<!--
				<p class="product-price fs-3">
					<span class="old-price text-muted text-small align-middle text-decoration-line-through" data-v-product-price-discount>$65.00</span>
					<span class="old-currency text-muted text-small align-middle text-decoration-line-through">$</span>
					<span class="price fw-bold" data-v-product-price_tax>$49.00</span>
					<span class="currency">$</span>
				</p>
				-->

				<!-- Form -->
				
				@@include('product-variant.html')   
				
				<form class="cart-form clearfix" method="post" action="/cart">
				
					<div class="cart-fav-box ">
						<!-- Cart -->
						<!-- button type="submit" name="addtocart" value="5" class="btn btn-primary" data-v-product-id data-v-vvveb-action="addToCart">Add to cart</button -->
						
							<input type="hidden" name="product_id" data-v-product-product_id>
							


							<div>
								@@include('product-options.html')   

								@@include('product-subscriptions.html')  

								<hr class="border opacity-50">

								<div class="form-group">
									
									<div class="mt-4 d-inline-block">
									<!--
									
									<label class="form-label" for="input-quantity">Qty</label>&nbsp;

									-->
										<div class="quantity">
											<div class="input-group spinner">
												<button class="btn btn-minus" type="button"><i class="la la-minus"></i></button>
												<input type="number" name="quantity" value="1" size="1" id="input-quantity" class="form-control">
												<button class="btn btn-plus" type="button"><i class="la la-plus"></i></button>
											</div>
										</div>

										<button type="submit" formaction="/cart/1" id="button-cart" class="btn btn-primary btn-shadow px-4 mx-2 button-cart" data-v-vvveb-action="addToCart" data-v-product-add_cart_url>
										
											<span class="loading d-none">
												<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
												</span>
												<span>Add to cart</span>...
											</span>

											<span class="button-text" >
												<i class="la la-shopping-bag la-lg me-2"></i> <span>Add to cart</span>
											</span>
											
										</button> 
									</div> 

									<div class="mt-4 d-inline-block">
										<button type="submit" formaction="/checkout/1" id="buynow" class="btn btn-light btn-shadow border px-4 buynow" data-v-product-buy_url>
										
											<span class="loading d-none">
												<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
												</span>
												<span >Add to cart</span>...
											</span>

											<span class="button-text" >
												<span>Buy now</span> <i class="la la-arrow-right la-lg ms-2"></i> 
											</span>
											
										</button>
									</div>

									<div class="product_wish_compare mt-4">
										<a href="/wishlist/1" class="btn btn-sm btn-outline-secondary border-0" title="Add to wish list"  data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
											<i class="la la-heart"></i> <span>Add to Wish List</span>
										</a>
										<a href="/compare/1" class="btn btn-sm btn-outline-secondary border-0" title="Compare product"  data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
											<i class="la la-random"></i> <span>Compare product</span>
										</a>
									</div>

								</div>
								
 
							</div>
						
					</div>
				</form>
				
			</div>

				<ul class="nav nav-tabs nav-scroll bg-body sticky-top mt-5" id="productTabs" role="tablist">
				  <li class="nav-item" role="presentation">
					<a class="nav-link active" id="description-tab" data-bs-target="#description" href="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
						Description
					</a>
				  </li>
				  <li class="nav-item" role="presentation">
					<a class="nav-link" id="specifications-tab" data-bs-target="#specifications" href="#specifications" type="button" role="tab" aria-controls="specifications" aria-selected="false">
						Specifications
					</a>
				  </li>
				  <li class="nav-item" role="presentation">
					<a class="nav-link" id="reviews-tab" data-bs-target="#reviews" href="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
						Reviews
					</a>
				  </li>				 
				  <li class="nav-item" role="presentation">
					<a class="nav-link" id="questions-tab" data-bs-target="#questions" href="#questions" type="button" role="tab" aria-controls="questions" aria-selected="false">
						Questions &amp; Answers
					</a>
				  </li>
				</ul>
				
				<div class="tab-content nav-scroll" id="productTabsContent" 
					data-bs-spy="scroll" 
					data-bs-target="#productTabs" 
					data-bs-root-margin="0px 0px -20%" 
					data-bs-smooth-scroll="false">
					
				  <div class="tab-pane show active" id="description" role="tabpanel" aria-labelledby="description-tab" tabindex="0">
				  
					<h4>Description</h4>
					
					<div class="description" data-v-product-content>
					
						<p>All in the world know the beauty of the beautiful, and in doing this they have (the idea of) what ugliness is; they all know the skill of the skilful, and in doing this they have (the idea of) what the want of skill is.</p>

						<p>So it is that existence and nonexistence give birth the one to (the idea of) the other; that difficulty and ease produce the one (the idea of) the other; that length and shortness fashion out the one the figure of the other; that (the ideas of) height and lowness arise from the contrast of the one with the other; that the musical notes and tones become harmonious through the relation of one with another; and that being before and behind give the idea of one following another.</p>

						<p>Therefore the sage manages affairs without doing anything, and conveys his instructions without the use of speech.</p>

						<p>All things spring up, and there is not one which declines to show itself; they grow, and there is no claim made for their ownership; they go through their processes, and there is no expectation (of a reward for the results). The work is accomplished, and there is no resting in it (as an achievement).</p>

						<blockquote>
							<p>
							<span>The work is done, but how no one can see;</span>
							<br>
							<span>`This this that makes the power not cease to be.</span>
							</p>
						</blockquote>
						
					</div>
					
				  
				  </div>
				  <div class="tab-pane" id="specifications" role="tabpanel" aria-labelledby="specifications-tab" tabindex="0">
					  @@include('product-specifications.html')   
				  </div>
				  <div class="tab-pane" id="reviews" role="tabpanel" aria-labelledby="reviews-tab" tabindex="0">
					  @@include('product-reviews.html')   
				  </div>		  
				  <div class="tab-pane" id="questions" role="tabpanel" aria-labelledby="questions-tab" tabindex="0">
					  @@include('product-questions.html')   
				  </div>
				</div>
				
						
				<div data-v-component-products="index" data-v-related="url.product_id" data-v-limit="6" data-v-page="url">
					<div data-v-if="count > 0" >
					  <h3 class="mt-5">Related products</h3>
					  <div class="row g-3">
						  <div class="col-md-6 col-lg-4 col-xl-3" data-v-product>
							<div class="product">
							
								@@include('../_includes/product-list-item.html')
							
							</div>
						 </div>             		
					 </div>
					 </div>
				</div>
        </div>
    </main>
    

	@@include('../_includes/footer.html')   
	 
	@@include('../_includes/footer-scripts.html')    


<script>
document.querySelector('.carousel-item').classList.add("active");
/*
//anchors not working properly due to base href, add full url to anchors
$('a[href^="#"]').attr("href", function (i,a) {
	return window.location.href + a;
});
$('a[href^="#"]').on("click", function (e) {
	window.location.hash = this.attributes.href.value;
});
*/
document.addEventListener('click',function (e) {
	let element = e.target.closest('a[href^="#"]');
	if (element) {
		let target = element.hash,
		//window.location.hash = element.attributes.href.value;
		$target = document.querySelector(target);
		//window.location.hash = target;

		document.firstElementChild.scroll({
		  top: $target.offsetTop - 200,//substract header height,
		  behavior: "smooth",
		});
		
		e.preventDefault();
		return false;
	}
});
</script>
  	
</body>
</html>
